<template>
	<view>
		
		<image class='bg' src="../../static/images/login_bg.png" mode="widthFix"></image>
		<view class="page">
			
		<view v-if="type == 0">
		  <input class='input input-phone' type="number" placeholder="请输入手机号" v-model="phone" />
		  <input class='input input-pw' type="password" placeholder="请输入密码" v-model="pw" />
		  <view class='zc font-14 color-gray' @click="qiehuan(2)">注册账号</view>
		  <view class='dy font-14 color-gray' @click="qiehuan(1)">动态密码登录</view>
		  <view class='btn-submit' @click="userlogin">登录</view>
		</view>
		
		<view v-if="type == 1">
		  <input class='input input-phone' type="number" placeholder="请输入手机号" v-model="phone" />
		  <view class="codec">
		  <input class='input input-pw code' placeholder="请输入验证码" v-model="code" />
		  <view v-if="show" class="getcode" @click="getlogincode">获取验证码</view>
		  <view v-if="!show" class="getcode" >{{count}} s</view>
		  </view>
		  <view class='zc font-14 color-gray' @click="qiehuan(2)">注册账号</view>
		  <view class='dy font-14 color-gray' @click="qiehuan(0)">手机密码登陆</view>
		  <view class='btn-submit' @click="codelogin">登录</view>
		</view>
		
		<view v-if="type == 2">
		  <input class='input input-phone' type="number" placeholder="请输入手机号" v-model="phone" />
		  <input class='input input-pw' type="password" placeholder="请输入密码" v-model="pw" />
		  <view class="codec">
		  <input class='input input-pw code' placeholder="请输入验证码" v-model="code" />
		  <view v-if="show" class="getcode" @click="getcode">获取验证码</view>
		  <view v-if="!show" class="getcode" >{{count}} s</view>
		  </view>
		  <view class='zc font-14 color-gray' @click="qiehuan(2)">注册账号</view>
		  <view class='dy font-14 color-gray' @click="qiehuan(0)">手机密码登陆</view>
		  <view class='btn-submit' @click="userregister">注册</view>
		</view>
			
		  
		</view>
		<!-- <uni-popup ref="popup" type="top">底部弹出 Popup</uni-popup> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				pw: '',
				type:'0',
				show: true,
				count: '',
				timer: null,
				sessionId:"",
				
				code:""
			};
		},
		methods:{
			userlogin:function(){
				let phone = this.phone
				let pw = this.pw
				if(phone == "" || phone == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入手机号',
					    duration: 2000
					});
					return false
				}
				if(pw == "" || pw == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入密码',
					    duration: 2000
					});
					return false
				}
				uni.request({
				    url: this.$url + "inf/user/login", 
				    data: {
				        phone: phone,
						password:pw
				    },
				    success: (res) => {
				        if(res.data.code == 200){
							uni.setStorage({
							    key: 'phone',
							    data: phone,
							});
							uni.switchTab({
							    url: '../index/index'
							});
						}else{
							uni.showToast({
								icon:"none",
							    title: res.data.msg,
							    duration: 2000
							});
						}
				    }
				});
			},
			//账号密码登陆
			
			getlogincode:function(){
				if(this.phone == "" || this.phone == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入手机号',
					    duration: 2000
					});
					return false
				}
				
				const TIME_COUNT = 60;
				if (!this.timer) {
					 this.count = TIME_COUNT;
					 this.show = false;
					 this.timer = setInterval(() => {
						 if (this.count > 0 && this.count <= TIME_COUNT) {
						  this.count--;
						  } else {
						  this.show = true;
						  clearInterval(this.timer);
						  this.timer = null;
						  }
					}, 1000)
				}
				
				uni.request({
				    url: this.$url + "inf/user/obtainLoginCode", 
				    data: {
				        phone: this.phone,
				    },
				    success: (res) => {
				        if(res.data.code == 200){
							this.sessionId = res.data.data
						}else{
							uni.showToast({
								icon:"none",
							    title: res.data.msg,
							    duration: 2000
							});
						}
				    }
				});
			},
			
			codelogin:function(){
				let phone = this.phone
				let code = this.code
				let sessionId = this.sessionId
				if(phone == "" || phone == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入手机号',
					    duration: 2000
					});
					return false
				}
				if(code == "" || code == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入验证码',
					    duration: 2000
					});
					return false
				}
				uni.request({
				    url: this.$url + "inf/user/codeLogin", 
				    data: {
				        phone: phone,
						code:code,
						sessionId:sessionId
				    },
				    success: (res) => {
				        if(res.data.code == 200){
							uni.setStorage({
							    key: 'phone',
							    data: phone,
							});
							uni.switchTab({
							    url: '../index/index'
							});
						}else{
							uni.showToast({
								icon:"none",
							    title: res.data.msg,
							    duration: 2000
							});
						}
				    }
				});
			},
			//验证码登陆
			
			userregister:function(){
				let phone = this.phone
				let pw = this.pw
				let code = this.code
				let sessionId = this.sessionId
				if(phone == "" || phone == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入手机号',
					    duration: 2000
					});
					return false
				}
				if(pw == "" || pw == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入密码',
					    duration: 2000
					});
					return false
				}
				if(code == "" || code == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入验证码',
					    duration: 2000
					});
					return false
				}
				uni.request({
				    url: this.$url + "inf/user/registerUser", 
				    data: {
				        phone: phone,
						password:pw,
						code:code,
						sessionId:sessionId
				    },
				    success: (res) => {
				        if(res.data.code == 200){
							uni.setStorage({
							    key: 'phone',
							    data: phone,
							});
							uni.switchTab({
							    url: '../index/index'
							});
						}else{
							uni.showToast({
								icon:"none",
							    title: res.data.msg,
							    duration: 2000
							});
						}
				    }
				});
			},
			//注册
			
			getcode(){
				
				if(this.phone == "" || this.phone == undefined){
					uni.showToast({
						icon:"none",
					    title: '请输入手机号',
					    duration: 2000
					});
					return false
				}
				
				const TIME_COUNT = 60;
				if (!this.timer) {
					 this.count = TIME_COUNT;
					 this.show = false;
					 this.timer = setInterval(() => {
						 if (this.count > 0 && this.count <= TIME_COUNT) {
						  this.count--;
						  } else {
						  this.show = true;
						  clearInterval(this.timer);
						  this.timer = null;
						  }
					}, 1000)
				}
				
				uni.request({
				    url: this.$url + "inf/user/sendShortMessageOne", 
				    data: {
				        phone: this.phone,
				    },
				    success: (res) => {
				        if(res.data.code == 200){
							this.sessionId = res.data.data
						}else{
							uni.showToast({
								icon:"none",
							    title: res.data.msg,
							    duration: 2000
							});
						}
				    }
				});
			},
			
			qiehuan(num){
				this.phone = ""
				this.pw=""
				this.code=""
				this.type = num
			}
			
			
		}
		
		
	}
</script>

<style lang="scss">
  .dy {text-align: right;margin-top: 10px;}
  .zc{
	  width: 50%;
	  float: left;
	  text-align: left;
	  margin-top:10px;
  }
  .bg {width: 100vw;}
  .input {
    height: 60px;
    padding-left: 30px;
    border-bottom: 1px solid #f1f1f1;
  }
  .input-phone {
    background: url(../../static/images/icon-phone.png) 0px 18px no-repeat ;
    background-size: 15px;
  }
  .input-pw {
    background: url(../../static/images/icon-pw.png) 0px 18px no-repeat ;
    background-size: 17px;
  }
  .btn-submit {
    background-color: #1FBBD1;
    border-radius: 5px;
    width: 100%;
    color: #fff;
    margin-top: 20px;
    text-align: center;
    padding: 10px 0;
  }
  .codec{
	  display: flex;
	  align-items: baseline ;
	  justify-content:space-between;
	  
  }
  .getcode{
	  width: 30%;
	  height: 40px;
	  line-height: 40px;
	  font-size: 16px;
	  text-align: center;
	  background: red;
	  color:#fff;
	  
  }
  .code{
	  width: 68%;
	  
  }
</style>
